<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
                                                                                                                        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>tap探究</title>

    <style>
        .box {
            width: 200px;
            height: 200px;
            background: red;
        }
        .child{
            display: block;
            width: 200px;
            height: 200px;
            background: green;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div class="box">
    <a class="child"></a>
</div>

<script>
    window.onload =function () {
        // 1.拿到标签
        var box = document.getElementsByClassName('box')[0];
        var child = box.getElementsByClassName('child')[0];


        var startTime = 0;
        var endTime = 0;
        var clickTime = 0;

        box.addEventListener('touchstart', function (e) {
            startTime = Date.now();
            console.log('touchstart');
            console.log(e.target);

        });
        box.addEventListener('touchmove', function (e) {
            console.log('touchmove');
        });
        box.addEventListener('touchend', function (e) {
            endTime = Date.now();
            console.log('touchend');

        });

        // 探究事件捕获顺序 -> 从外往内(从爹到儿子)
        box.addEventListener('click', function () {
            clickTime = Date.now();
            console.log('捕获 box addEventListener click!!!');
//            console.log('start:', startTime);
//            console.log('end:', endTime);
//            console.log('click:', clickTime);

            console.log('click - start:', clickTime - startTime);
            console.log('click - end:', clickTime - endTime);

/**
 * 通过实验知道:
 * 1. 当触发touchmove的时候,click事件就不会再触发
 * 2. 当start于end的事件戳差值超过700ms的时候,click事件就不会触发
 * */
        });


    }
</script>

</body>
</html>